<template>
    <div class="input" v-show="ShowArrays[0]">
        <el-row class="input-containter">
            <!-- <el-col :span="8" class="input-text">
                <div class="sub-title">档案号查询:</div>
            </el-col> -->
            <el-col :span="16">
                <el-autocomplete
                size=''
                class="inline-input"
                v-model="state2"
                :fetch-suggestions="querySearch"
                placeholder="请输入地名地址"
                :trigger-on-focus="false"
                @select="handleSelect"
                >
                   <template slot="prepend">
                           地名
                    </template> 
                </el-autocomplete>
            </el-col>
        </el-row>
    </div>
</template>


<script>
    import axios from 'axios'
    import L1 from '../assets/images/L1.png'
    import L2 from '../assets/images/L2.png'
    import L3 from '../assets/images/L3.png'
    import L4 from '../assets/images/L4.png'
    import L5 from '../assets/images/L5.png'
    import L6 from '../assets/images/L6.png'
    import L7 from '../assets/images/L7.png'
    import L8 from '../assets/images/L8.png'
    import L9 from '../assets/images/L9.png'
    import L10 from '../assets/images/L10.png'
    import {mapGoTo}  from '../map/mapHandle'
    export default {

        data() {
            return {
                restaurants: [],
                
                state2: ''
            };
        },
        methods: {
            querySearch(queryString, cb) {
                //数据改变清空标记
                window['view'].graphics.remove(window['pointGraphic']);
                // var restaurants = this.restaurants;
            // var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                const GLOBAL_TOKEN = window['TOKEN'];
                let val = queryString;
                axios({
                    method:'GET',
                    url:`http://10.89.5.191/OneMapServer/rest/services/address_query/Transfer?token=${GLOBAL_TOKEN}&search_word=${val}&result_count=10`
                })
                .then((res)=>{
                    let data = res.data.data;
                    let resData = data.map((item,index)=>{
                        //let tmp = {};
                        item.value = (item.address ||  item.verifyName)+'('+item.regionJw+')';
                        item.type = item.resultType;
                        item.address = item.regionJw;
                        item.x = item.pointX;
                        item.y = item.pointY;
                        item.index = index + 1; 
                        return item;
                    })
                    cb(resData);
                })     
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                
                mapGoTo(item.x,item.y,13);
                this.heightLine(item);
            },
            heightLine(obj,id){
                let Graphic  = window['Graphic'];
                var popupTemplate1 = {
                    title: "",
                    content: ""
                };
                let tmpStr = `<table>
                <tr>
                    <td>类型</td>
                    <td>${obj.resultType}</td>
                </tr>
                <tr>
                    <td>区县</td>
                    <td>${obj.regionQx}</td>
                </tr>
                </table>`;
                popupTemplate1.content = tmpStr;
                popupTemplate1.title = (obj.verifyName || obj.address) + '-'+obj.regionJd;
                var point = {
                    type: "point",  // autocasts as new Point()
                    x: obj.pointX,
                    y: obj.pointY,
                    // z: 300,
                    spatialReference: {
                        wkid: 3857
                    }
                };
                let icons = [
                    {id:1,icon:L1},
                    {id:2,icon:L2},
                    {id:3,icon:L3},
                    {id:4,icon:L4},
                    {id:5,icon:L5},
                    {id:6,icon:L6},
                    {id:7,icon:L7},
                    {id:8,icon:L8},
                    {id:9,icon:L9},
                    {id:10,icon:L10}
                ];
                let icon = null;
                icons.forEach((item,index)=>{
                    if(item.id == obj.index){
                        icon = item.icon;
                    }
                })
                var markerSymbol = {
                    type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
                    url: icon,
                    width: "32px",
                    height: "32px"
                };

                var pointGraphic = new Graphic({
                    geometry: point,
                    symbol: markerSymbol,
                    popupTemplate: popupTemplate1
                });
                window['pointGraphic'] = pointGraphic;
                window['view'].graphics.add(pointGraphic);
            }
        },
        props:{
            showArrys:{type:Array}
        },
        computed:{
            ShowArrays(){
                return this.$props.showArrys;
            }
        }
    }
</script>
<style scoped>
.input{
    position: fixed;
    top: 6%;
    left: 6%;
}
.input-containter{
    width: 300px;
    height: 40px;
    display: flex;
    /* background: #ffffff; */
}
.input-text{
    height: 40px;
    line-height: 40px;
    color:gray;
    font-size: 14px;
}
.inline-input{
    width: 300px;
}

</style>